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ABSTRACT 


App development often requires the developer to have the knowledge of 
different platforms like android, ios, the two leading operating systems for 
mobile devices. To develop android apps one need to learn complex language 
like Java or Kotlin and Android Studio IDE (Integrated Development 
Environment] whereas for ios languages are Swift, C#, objective C and Xcode 
as environment. The two applications may have the same layout and logic but 
several components of the user interface [UI] will differ and the applications 
themselves need to be developed in two different languages. Besides, certain 
hybrid mobile application frameworks existing in the market were not able to 
cater similar experience to the same user on all native platforms. 

This thesis has evaluated the newly released framework React Native that can 
create both iOS and Android applications by compiling the code written in 
React. The resulting applications can share code and consist of the UI 
components which are unique for each platform. The thesis focused on 
Android and tried to replicate an existing Android Application in order to 
measure user experience and performance. The result was surprisingly 
positive for React Native as some users could not tell the two applications 
apart and nearly all users did not mind using a React Native application. 

The overall experience is that React Native a very interesting framework that 
can simplify the development process for mobile applications to a high degree. 

As long as the application itself is not too complex, the development is 
uncomplicated and one is able to create an application in very short time and 
be compiled to both Android and iOS. The application base was set up using 
Expo. Expo is a framework and a platform for universal React applications. It is 
a set of tools and services built around React Native and native platforms that 
help you develop, build, deploy, and quickly iterate on iOS, Android, and web 
apps from the same JavaScript/TypeScript codebase. 
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INTRODUCTION TO APP 

App is created using expo-cli with a blank template providing javascript codebase. This project integrates a React Native front- 
end with an AWS Amplify back-end that has user authentication (AWS Cognito] and the Storage API from AWS Amplify. This 
configuration allows us to perform CRUD operations to interact with Amazon S3 from our React native front end. 

App Overview 

> Users can sign up/in to the app. 

> Users can upload pictures by pressing the add button. 

> Users can delete pictures by pressing the trash button. 

> Users can update the feed by pressing the reload button. 

Requirements 

Nodejs, npm, expo-cli, react-native, aws-amplify 

Configuring the project 

1. Initialize the project in your directory using blank template 

expo init S3 Image Upload 

2. Configure your AWS account 

amplify configure 
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shiraz$shiraz-Inspiron*3521:-/'Dcsktop/Diagnosis$ amplify configure 
Follow these steps to set up access to your AWS account: 

Sign in to your AWS administrator account: 
https://console.aws.amazon.com/ 

Press Enter to continue 

Specify the AWS Region 
7 region: ap-south-1 

Specify the username of the new IAH user: 

7 user name: Shiraz 

Complete the user creation using the AWS console 

https://console.aws.amazon.com/iam/home?reqion=undefmed»/usersSnew?step=final&accessKev&userNames=5hiraz&permis5ionType=policies&policies=am:aws:iam::aws:policy%2FAdminist rat 
orAccess 

Press Enter to continue 

Enter the access key of the newly created user: 

7 accessKeyld: AKIAQ2IR4Z*•«*«****• 

7 secretAccessKey: hUdzwyfg/DlzmdH2nCul*********** , »******* 

This would update/create the AWS Profile in your local machine 

? Profile Name: Ar| Lify 

Successfully set up the new user. 


3. Initialize amplify project 
amplify init _ 


[? Enter a name for the project react-native-s3 
[? Enter a name for the environment rnstorage 
? Choose your default editor: Visual Studio Code 
? Choose the type of app that you're building javascript 

Please tell us about your project 

? What javascript framework are you using react-native 
[? Source Directory Path: / 

[? Distribution Directory Path: / 

[? Build Command: npm run-script build 
[? Start Command: npm run-script start 
Using default provider awscloudformation 

For more information on AWS Profiles, see: 

https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html 

[? Do you want to use an AWS profile? Yes 
? Please choose the profile you want to use default 

Initializing project in the cloud... 


4. Add auth 
amplify add auth 

# When prompt, choose: Yes, use the default configuration. 

5. Add Storage 

amplify add storage 

# Choose: Content (Images, audio, video, etc.] 

# Give access to only authenticated users. 

# Give users read/write access. 

6. Deploy your project to AWS 
amplify push 


I Category I Resource name I Operation I Provider plugin I 

I - I - I - I I 

I Auth I cognito251d55d7 I Create I awscloudformation I 

I Storage I s32f8c2338 I Create I awscloudformation I 

[? Are you sure you want to continue? Yes 

Updating resources in the cloud. This may take a few minutes... 
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Running the Application 

1. Install client dependencies. 

npm install 

2. Launch the React Native app in your simulator under your project directory. 

expo start -ios 


# or 

expo start -android 


Link to access app 

https://expo.io/@shirazali!997/image-upload 


Screenshots 
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